<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cvs{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas class="cvs"></canvas>
</body>
<script>

  const cvs = document.querySelector(".cvs")
  cvs.width = 400;
  cvs.height = 400;

  const c2d = cvs.getContext("2d");

  let r = 100;
  let x = 200;
  let y = 200;

  c2d.arc(x, y, r, 0, 2*Math.PI);

  // 画刻度
  for(let i=0;i<60;i++){
    // 保存
    c2d.save()
    // 位移
    c2d.translate(x, y);
    // 旋转
    c2d.rotate( Math.PI/180 * (360 / 60 * i) );
    c2d.moveTo( 0, -r );
    if( i % 5 === 0){
      c2d.lineTo( 0, -r + 10 );
    }else{
      c2d.lineTo( 0, -r + 5 );
    }
    // 清除
    c2d.restore();
  }
  
  c2d.moveTo(150, 200);
  c2d.lineTo(210, 200);
  
  c2d.moveTo(200, 120);
  c2d.lineTo(200, 210);

  c2d.stroke();

  c2d.beginPath();
  c2d.arc(200, 200, 5, 0, 2*Math.PI);
  c2d.fill();

  c2d.textAlign = "center";
  c2d.textBaseline = "middle";
  c2d.fillText("劳力士", 200, 216);
  
</script>
</html>